<script setup>
import useUserStore from '@/store/user'
import { storeToRefs } from 'pinia'
import { useFullscreen } from '@vueuse/core'
import FromDrawer from '@/components/from-drawer.vue'
import { updatePassword } from '@/api/manager'
import { ref } from 'vue'
import { toast } from '@/utils/elnotification'

//退出系统
const userStore = useUserStore()
const onLogout = () => {
  userStore.logout()
}

//获取登录用户头像及名称信息
const { user, isMenu } = storeToRefs(userStore)

//切换全屏
const { isFullscreen, toggle } = useFullscreen()

//页面刷新
const onRefresh = () => location.reload()

//密码表单
const form = ref({
  oldpassword: '',
  password: '',
  repassword: ''
})

//密码校验规则
const rules = {
  oldpassword: [{ required: true, message: '旧不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  repassword: [{ required: true, message: '新不能为空', trigger: 'blur' }]
}

//修改密码
const drawerRef = ref(null)
const onUpdataPs = () => {
  drawerRef.value?.open()
}

//确认密码修改
const formRef = ref(null)
const onConfirm = async () => {
  //输入框校验
  const val = await formRef.value?.validate((val) => val)
  //校验结果
  if (!val) return false
  //打开加载状态
  drawerRef.value.showLoading()
  //调用接口
  try {
    const res = await updatePassword({ ...form.value })
    toast('修改成功')
  } catch (err) {
  } finally {
    //关闭加载状态
    drawerRef.value.hideLoading()
  }
}

//点击菜单收缩
const onMenu = () => {
  userStore.setIsMenu()
}
</script>

<template>
  <div class="flex justify-between items-center bgc">
    <div class="cursor-pointer">
      <el-icon size="26px" @click="onMenu">
        <Expand v-if="!isMenu" />

        <Fold v-else />
      </el-icon>
    </div>
    <div class="content flex justify-between items-center">
      <div class="flex items-center">
        <el-tooltip
          effect="dark"
          content="全屏"
          placement="bottom"
          :content="isFullscreen ? '退出全屏' : '全屏'"
        >
          <span
            @click="toggle"
            style="width: 40px; height: 35px"
            class="flex justify-center items-center cursor-pointer"
          >
            <el-icon size="20px">
              <el-icon>
                <FullScreen v-if="!isFullscreen" />
                <Aim v-else />
              </el-icon>
            </el-icon>
          </span>
        </el-tooltip>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
          <span
            @click="onRefresh"
            style="width: 40px; height: 35px"
            class="flex justify-center items-center cursor-pointer"
          >
            <el-icon size="20px">
              <RefreshRight />
            </el-icon>
          </span>
        </el-tooltip>
        <el-tooltip effect="dark" content="通知" placement="bottom">
          <span
            style="width: 40px; height: 35px"
            class="flex justify-center items-center cursor-pointer"
          >
            <el-icon size="20px">
              <Postcard />
            </el-icon>
          </span>
        </el-tooltip>
      </div>
      <div class="info">
        <el-dropdown>
          <span class="flex items-center">
            <el-avatar :size="30" :src="user.avatar" />
            <span class="ml-3"> {{ user.username }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="onLogout">
                <el-icon>
                  <CircleCloseFilled />
                </el-icon>
                退出系统
              </el-dropdown-item>
              <el-dropdown-item divided>
                <el-icon>
                  <InfoFilled />
                </el-icon>
                个人信息
              </el-dropdown-item>
              <el-dropdown-item @click="onUpdataPs">
                <el-icon>
                  <Unlock />
                </el-icon>
                修改密码
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <from-drawer ref="drawerRef" title="修改密码" destroy-on-closee @submit="onConfirm">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="auto">
        <el-form-item prop="oldpassword" label="旧密码">
          <el-input v-model="form.oldpassword" placeholder="请输入旧密码" />
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-input
            v-model="form.password"
            placeholder="请输入新密码"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item prop="repassword" label="确认密码">
          <el-input
            v-model="form.repassword"
            placeholder="确认密码"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
    </from-drawer>
  </div>
</template>

<style scoped>
.bgc {
  background-color: #ffffff !important;
  height: 100%;
  padding: 0 20px;
}

.info {
  margin-left: 20px;
}

.itemspan span :hover {
}
</style>
